<template>
	<view class="container">
		<!-- 顶部导航 -->
		<!-- <view class="nav-bar">
			<uni-icons type="back" size="24" @click="goBack" />
			<text class="nav-title">设置</text>
		</view> -->

		<!-- 图标 + 应用名 + 版本 -->
		<view class="app-info">
			<image class="app-icon" src="https://yun.qiongtuyule.com/static/img/login/logo.png" mode="aspectFill"></image>
			<text class="app-name">净昆达白蚁监测</text>
			<text class="app-version">版本：2.0.1</text>
		</view>

		<!-- 设置项列表 -->
		<view class="setting-list">
			<uni-list>
				<uni-list-item title="关于我们"  @tap="openAbout" />
				<uni-list-item title="隐私协议"  @tap="openPrivacy" />
				<uni-list-item title="用户协议"  @tap="openUser" />
			</uni-list>
		</view>
	</view>
</template>

<script>
	export default {
		methods: {
			goBack() {
				uni.navigateBack();
			},
			openAbout() {
				uni.navigateTo({
					url: '/pages/my/about'
				});
			},
			openPrivacy() {
				uni.navigateTo({
					url: '/pages/my/privacy'
				});
			},
			openUser() {
				uni.navigateTo({
					url: '/pages/my/agreement'
				});
			},
		},
	};
</script>

<style scoped>
	.container {
		background-color: #f8f8f8;
		height: 100vh;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		padding: 30rpx;
		/* background-color: #fff; */
		/* border-bottom: 1px solid #eee; */
		margin-top:60rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: bold;
	}

	.app-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 60rpx;
		margin-bottom: 40rpx;
	}

	.app-icon {
		width: 120rpx;
		height: 120rpx;
		border-radius: 24rpx;
		margin-bottom: 20rpx;
	}

	.app-name {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.app-version {
		font-size: 26rpx;
		color: #999;
	}

	.setting-list {
		margin: 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
	}
</style>